<template>
    <div class="waybill">
        <div class="waybill-title">发货记录</div>
        <el-table size="mini" border :data="waybill">
            <el-table-column label="货单号" prop="number"></el-table-column>
            <el-table-column label="发货时间" prop="delivery_time" :formatter="timeFormatter"></el-table-column>
            <el-table-column label="物流公司" prop="logistics_company"></el-table-column>
            <el-table-column label="物流单号" prop="logistics_order"></el-table-column>
            <el-table-column label="状态" prop="status_name"></el-table-column>
            <el-table-column label="产品数量" prop="count"></el-table-column>
            <el-table-column width="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openView(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="detailVisible" center title="发货详情" width="70%">
            <el-descriptions border>
                <el-descriptions-item label="货单号">{{activeWaybill.number}}</el-descriptions-item>
                <el-descriptions-item label="订单号">{{activeWaybill.order_number}}</el-descriptions-item>
                <el-descriptions-item label="订单号">{{activeWaybill.order_number}}</el-descriptions-item>
                <el-descriptions-item label="发货时间">{{timeFormatter({}, {},activeWaybill.delivery_time)}}</el-descriptions-item>
                <el-descriptions-item label="状态">{{activeWaybill.status_name}}</el-descriptions-item>
                <el-descriptions-item v-if="activeWaybill.receiving_time" label="确认时间">{{timeFormatter({}, {},activeWaybill.receiving_time)}}
                </el-descriptions-item>
                <el-descriptions-item label="物流公司">{{activeWaybill.logistics_company}}</el-descriptions-item>
                <el-descriptions-item label="物流单号">{{activeWaybill.logistics_order}}</el-descriptions-item>
                <el-descriptions-item label="产品数量">{{activeWaybill.count}}</el-descriptions-item>
            </el-descriptions>
            <div class="goods-title">包含产品</div>
            <el-table size="mini" border :data="activeWaybill.goods">
                <el-table-column label="图片" width="60px">
                    <template slot-scope="scope">
                        <el-image style="width: 40px; height: 40px;" fit="contain" :src="scope.row.goods_image"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称" prop="goods_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="型号" prop="goods_model" width="120px"></el-table-column>
                <el-table-column label="发货数量" prop="num" width="120px"></el-table-column>
            </el-table>
            <span slot="footer">
                <el-button v-if="activeWaybill.status == 1" type="primary" size="medium" @click="confirmTake">确认收货</el-button>
                <el-button type="default" size="medium" @click="detailVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {confirmShipment} from '../../api/apis';

    export default {
        name: "OrderWaybill",
        data() {
            return {
                detailVisible: false,
                activeWaybill: {}
            }
        },
        props: {
            waybill: {
                type: Object | Array,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            timeFormatter(row, column, callvalue) {
                let date = new Date();
                date.setTime(callvalue * 1000);
                return date.format("yyyy-MM-dd hh:mm");
            },
            openView(item) {
                this.detailVisible = true;
                this.activeWaybill = item;
            },
            confirmTake() {
                if (this.activeWaybill.id) {
                    this.$confirm("您确认已收到当前商品了吗？", "确认收货").then(() => {
                        confirmShipment({
                            id: this.activeWaybill.id
                        }).then(() => {
                            this.$message.success('收货成功');
                            this.$parent.GetOrderDetail();
                            this.detailVisible = false;
                        });
                    }).catch();
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .waybill {
        margin: 20px 0;
        
        .waybill-title {
            font-size: 18px;
            color: #303133;
            font-weight: bold;
            padding: 10px 0;
        }
        
        .goods-title {
            font-size: 18px;
            color: #303133;
            line-height: 24px;
            text-align: center;
            padding: 20px;
        }
    }
</style>
